$(function(){
    // 去掉所以a的下户线
    $('a').css({
        textDecoration:'none'
    })
    $('.bd1copy a').attr('href',"list.html").hover(function(){
        $(this).css({color:'skyblue'})
    },function(){
        $(this).css({color:'black'})
    })
    // 页面顶部的交互
    $('.top .tp1 li:eq(0) a').hover(function(){
        $(this).css({color:'skyblue'})
    },function(){
        $(this).css({color:'#666666'})
    })
    $('.top .tp1 li:eq(3) a').hover(function(){
        $(this).css({color:'red'})
    },function(){
        $(this).css({color:'#666666'})
    })
    $('.top .tp2 li a').hover(function(){
        $(this).css({color:'skyblue'})
    },function(){
        $(this).css({color:'#666666'})
    })
    //
    $('.top .tp1 li:eq(2)').hover(function(){
        $(this).children('img').css({
            transform:"rotate(180deg)"
        });
        $(this).children('.lid1').css({
            display:'block',
            zIndex:'1'
        });
    },function(){
        $(this).children('img').css({
            transform:"rotate(0deg)"
        });
        $(this).children('.lid1').css({
            display:'none'
        });
    })
    //
    $('.top .tp1 li:eq(2) .lid1 p span:eq(0)').click(function(){
        $('.top .tp1 li:eq(2) .lid1 .lid11').css({
            display:'block'
        });
        $('.top .tp1 li:eq(2) .lid1 .lid12').css({
            display:'none'
        });
    })
    $('.top .tp1 li:eq(2) .lid1 p span:eq(1)').click(function(){
        $('.top .tp1 li:eq(2) .lid1 .lid12').css({
            display:'block'
        });
        $('.top .tp1 li:eq(2) .lid1 .lid11').css({
            display:'none'
        });
    })
    //我的
    $('.top .tp2 li:eq(3)').hover(function(){
        $(this).children('b').css({
            transform:"rotate(180deg) translateY(4px)"
        });
        $(this).children('ul').css({
            display:'block',
            zIndex:'1'
        });
    },function(){
        $(this).children('b').css({
            transform:"rotate(0deg)"
        });
        $(this).children('ul').css({
            display:'none'
        });
    })
    // 收藏
    $('.top .tp2 .nanshou').hover(function(){
        $(this).children('b').css({
            transform:"rotate(180deg) translateY(4px)",
            // 
        });
        $(this).children('ul').css({
            display:'block',
            zIndex:'1'
        });
    },function(){
        $(this).children('b').css({
            transform:"rotate(0deg)"
        });
        $(this).children('ul').css({
            display:'none'
        });
    })
    //二维码
    $('.top .tp2 .nanshou2').hover(function(){
        $(this).children('img').css({
            display:'block',
            zIndex:'1'
        });
    },function(){
        $(this).children('img').css({
            display:'none'
        });
    })


    // 搜搜
    $('.search .sd2 ul a').hover(function(){
        $(this).css({
            color:'black'
        })
    },function(){
        $(this).css({
            color:'#666666'
        })
    })
    // 头部导航栏
    $('.nav .nl1').hover(function(){
        $(this).children('img').css({
            transform:"rotate(180deg)",
        });
        $(this).children('a').css({
            color:'white'
        })
        $(this).css({
            background:'pink'
        })
        $('.nav .nl2').css({
            background:'white'
        })
        $('.bd1').css({
            display:'block'
        })
        $('.bd1copy').css({
            display:'none'
        })
    },function(){
        $(this).children('img').css({
            transform:"rotate(0deg)",
        });
        $(this).children('a').css({
            color:'black'
        })
        // $(this).css({
        //     background:'white'
        // })
    })
    $('.nav .nl2').hover(function(){
        $(this).children('img').css({
            transform:"rotate(180deg)",
        });
        $(this).children('a').css({
            color:'white'
        })
        $(this).css({
            background:'pink'
        })
        $('.nav .nl1').css({
            background:'white'
        })
        $('.banner .bd1').css({
            display:'none'
        })
        $('.banner .bd1copy').css({
            display:'block'
        })
    },function(){
        $(this).children('img').css({
            transform:"rotate(0deg)",
        });
        $(this).children('a').css({
            color:'black'
        })
    })
    $('.banner .bd1').hover(function(){
        $(this).css({display:'block'})
    },function(){
        $(this).css({display:'none'})
    })
    $('.banner .bd1copy').hover(function(){
        $(this).css({display:'block'})
    },function(){
        $(this).css({display:'none'})
    })
    // $('.banner .bd1').mouseout(function(){
    //     $(this).css({display:'none'})
    // })
    // $('.banner .bd1copy').mouseout(function(){
    //     $(this).css({display:'none'})
    // }) 
    //小骨头
    $('.toGreen').hover(function(){
        $(this).children('a').css({
            color:'green'
        })
        $(this).children('img').css({
            transform:'rotate(350deg)'
        })
    },function(){
        $(this).children('a').css({
            color:'black'
        })
        $(this).children('img').css({
            transform:'rotate(0deg)'
        })
    })
    //banner
    $('.banner .bd11').hover(function(){
        $(this).children('.dog').css({
            display:'block'
        })
    },function(){
        $(this).children('.dog').css({
            display:'none'
        })
    })
    $('.banner .bd12').hover(function(){
        $(this).children('.cat').css({
            display:'block'
        })
    },function(){
        $(this).children('.cat').css({
            display:'none'
        })
    })
    // 二级菜单
    $('.bd1copy').children().hover(function(){
        $(this).css({borderTop:'1px solid #4d9b35',borderBottom:'1px solid #4d9b35'})
        $(this).children('.supernews').css({display:'block'})
        .siblings().children('.supernews').css({display:'none'})
        $(this).children('b').css({display:'none'})
    },function(){
        $(this).css({borderTop:'none',borderBottom:'none'})

        $(this).children('.supernews').css({display:'none'})
        $(this).children('b').css({display:'block'})
    })
    // banner right
    $('.bd3').children().hover(function(){
        $(this).stop().animate({
            marginLeft:'-15px'
        },100)
    },function(){
        $(this).stop().animate({
            marginLeft:'0px'
        })
    })
    
    
    // 侧边栏
    $('.aside').children('div').hover(function(){
        $(this).children('p').css({
            color:'#ffffff',
        })
    },function(){
        $(this).children('p').css({
            color:'#9b9b9b',
        })
    })
    // 获取用户商品接口
    // 获取成功
    var val = JSON.parse(localStorage.getItem('id'))
    if(val){
        $('.tp2 li').eq(0).html('');
        $('.tp2 li').eq(1).html('');
    }
    // 商品信息  news1
    var Id = location.search.split("=")[1];
    $.get(
        'http://jx.xuzhixiang.top/ap/api/productlist.php',
        {uid:val},
        data=>{
            if(data.data){
                var news = data.data;
            }
            var str='';
            var desc='';
            for(var i=0;i<news.length;i++){
                if(Id == news[i].pid){
                    str+=`
                        <div class="small">
                            <img src="${news[i].pimg}" alt="">
                            <div class="move"></div>
                        </div>
                        <div class="big">
                            <img src="${news[i].pimg}" alt="">
                        </div>
                        <div class="photos">
                            <div class="arrowleft">
                                <
                            </div>
                            <div class="fivephotos">
                                <ul>
                                    <li><img src="${news[i].pimg}" alt=""></li>
                                    <li><img src="${news[i].pimg}" alt=""></li>
                                    <li><img src="${news[i].pimg}" alt=""></li>
                                    <li><img src="${news[i].pimg}" alt=""></li>
                                    <li><img src="${news[i].pimg}" alt=""></li>
                                </ul>
                            </div>
                            <div class="arrowright">
                                >
                            </div>
                        </div>
                        <p class="number">
                            <span class="ns1">编号：702770</span>
                            <span class="ns2"><span class="glyphicon glyphicon-share"></span>分享</span>
                            <span class="ns3"><span class="glyphicon glyphicon-star"></span>收藏商品</span>
                        </p>
                    `;
                }
            }
            $('.magnify').html(str);
            //放大
            $('.small')
            .mouseenter(function(){
                $('.move').stop().show()
                $('.big').stop().show()
            })
            .mouseleave(function(){
                $('.move').stop().hide()
                $('.big').stop().hide()
            })
            .mousemove(function(ev){
                var x=ev.pageX-50-$(this).offset().left;
                var y=ev.pageY-50-$(this).offset().top;
                x=x<=0?0:x>=200?200:x;
                y=y<=0?0:y>=200?200:y;
                $('.move').css({
                    left:x,
                    top:y
                })
                $('.big img').css({
                    left:-2*x,
                    top:-2*y
                })
            })
            // 五小图
            $('.fivephotos li').css({borderLeft:'1px solid #e1e1e1'})
            var num=0;
            $('.arrowleft').click(function(){
                num++;
                if(num==3){
                    num=0;
                }
                $('.photos ul').stop().animate({
                    left:-num*70
                })
                
            })
            var num1=-2;
            $('.arrowright').click(function(){
                num1++;
                if(num1==1){
                    num1=-2;
                }
                $('.photos ul').stop().animate({
                    left:num1*70
                })
            })
        }
    )
    //取购物车的商品
    // $.get("http://jx.xuzhixiang.top/ap/api/cart-list.php", {
    //     id: val
    // }, data => {
    // })
    //获取购物车商品总数量
    var number2 = function(){
        $.get("http://jx.xuzhixiang.top/ap/api/cart-list.php", {
            id: val
        }, data => {
            if(data.data){
                var news=data.data;
                var str2='';
                for(var item=0;item<news.length;item++){
                    str2 = +str2 + +`${news[item].pnum}`;
                }
                $('.top .tp2l1 .tp2l11').html(str2);
                $('.sd3 .sd3s1').html(str2);
                $('.aside .ad2 .adp1').html(str2);
            }
        })
        //侧边
        $.get("http://jx.xuzhixiang.top/ap/api/cart-list.php", {
            id: val
        }, data => {
            console.log(data);
            if(data.data){
                var news=data.data;
                var str='';
                for(var item=0;item<news.length;item++){
                    str+=`
                    <div>
                        <a href="detail.html?id=${news[item].pid}"  target="_blank"><img src="${news[item].pimg}" alt=""></a>
                        <p>标题：${news[item].pname}</p>
                        <p>价格：${news[item].pprice}</p>
                        <p>数量：${news[item].pnum}</p>
                    </div>
                    `;
                }
                $('.ad21').html(str);
            }
            $('.ad21').css({display:'none'});
            $('.ad2').hover(function(){
                $('.ad21').css({display:'block'});
            },function(){
                $('.ad21').css({display:'none'});
            })
        })
    }
    number2();
    
    // 点击增加数量
    $('.property .pp11').hover(function(){
        $(this).css({opacity:'.8'})
    },function(){
        $(this).css({opacity:'1'})
    })
    $('.property .pp11').click(function(){
        var s822 = $('.pp8 .s822').html();
        console.log(s822);
        $.get("http://jx.xuzhixiang.top/ap/api/add-product.php", {
            uid: val,
            pid: Id,
            pnum: s822
        }, data => {
            alert('成功添加'+s822+"件商品")
            number2();
        })
    })
    //多余商品展示
    $.get("http://jx.xuzhixiang.top/ap/api/productlist.php", {
        uid: val
    }, data => {
        console.log(data);
        if(data.data){
            var news=data.data;
            var str3='';
            for(var item=0;item<news.length;item++){
                str3 +=`
                <div>
                    <a href="detail.html?id=${news[item].pid}"  target="_blank"><img src="${news[item].pimg}" alt=""></a>
                    <p>标题：${news[item].pname}</p>
                    <p>价格：${news[item].pprice}</p>
                    <p>描述：${news[item].pdesc}</p>
                </div>
                `;
            }
            $('.toshowmorelist').html(str3);
        }
    })
})
//商品属性

var property = document.querySelectorAll('.property')[0];
var minus  = property.getElementsByClassName('s821')[0];
var text   = property.getElementsByClassName('s822')[0];
var add    = property.getElementsByClassName('s823')[0];
minus.onclick = function(){
    if(text.innerText>1){
        text.innerText -=1;
    }else{
        text.innerText =1;
    }
}
add.onclick = function(){
    text.innerText = +text.innerText+1;
}
